<template>
  <div class="box" v-if="proList.length">
    <CommonGoodItem v-for="(item, index) in proList" :key="index" :item="item" />
  </div>
  <div v-else class="noMess">{{ mess.noProduct }}</div>
  <div class=""></div>
  <div class="page-box" v-if="pageInfo.totalPage > 1">
    <div class="before-btn" @click="pageGo(1)">←</div>
    <div
      v-if="pageInfo.totalPage > 6"
      :class="['number-box', nowPage == 1 ? 'page-chose' : '']"
      @click="changePage(1)"
    >
      1
    </div>
    <div v-if="pageInfo.totalPage < 6" class="page-box">
      <div
        :class="['number-box', nowPage == item ? 'page-chose' : '']"
        v-for="item in pageInfo.totalPage"
        :key="item"
        @click="changePage(item)"
      >
        {{ item }}
      </div>
    </div>
    <div v-if="pageInfo.totalPage > 5" class="page-box">
      <div v-if="nowPage > 5" :class="['number-box']">...</div>
      <div
        :class="['number-box', nowPage == item ? 'page-chose' : '']"
        v-for="item in centerPage"
        @click="changePage(item)"
      >
        {{ item }}
      </div>
      <div v-if="nowPage + 2 < pageInfo.totalPage" :class="['number-box']">...</div>
      <div
        v-if="nowPage + 2 < pageInfo.totalPage"
        :class="['number-box']"
        @click="changePage(pageInfo.totalPage)"
      >
        {{ pageInfo.totalPage }}
      </div>
    </div>
    <div class="right-btn" @click="pageGo(2)">→</div>
  </div>
</template>

<script lang="ts" setup>
import type { TGoodsItem } from "~/components/common/type";

import { language } from "~/conf";

const { mess } = language;
const emit = defineEmits(["backTotal"]);
const route = useRoute();

defineProps<{
  filterCont: string;
}>();
const proList = ref<TGoodsItem[]>([]);
let pageInfo = ref({
  total: 0,
  pageSize: 20,
  totalPage: 0,
});
let nowPage = ref(1);
let centerPage = ref([4, 5, 6, 7, 8]);
let filteredResult = ref<Tsearch>({});
let filteredAttr = ref<string[]>([]);
let searchCont = ref("");
let widthList = ref<number[]>([]);
let weightList = ref<number[]>([]);
let priceList = ref<number[]>([]);
let vpriceList = ref<number[]>([]);

const init = async () => {
  let Flist = [] as any;
  if (filteredAttr.value.length) {
    filteredAttr.value.forEach((item: string, index: number) => {
      Flist["property" + (index + 1)] = item;
    });
  }
  const { data } = await useServerFetch<{
    list: TGoodsItem[];
    total: number;
  }>("/app-api/product/spu/page", {
    method: "post",
    body: {
      pageNo: nowPage.value,
      pageSize: pageInfo.value.pageSize,
      attributeCondition: filteredResult.value,
      keyword: searchCont.value,
      categoryIds: Flist,
      price: priceList.value.length >= 2 ? [priceList.value[0] * 100, priceList.value[1] * 100] : [],
      volumePrice: vpriceList.value.length >= 2 ? [vpriceList.value[0] * 100, vpriceList.value[1] * 100] : [],
      weight: weightList.value,
      width: widthList.value,
    },
  });
  proList.value = data?.list;
  pageInfo.value.total = data?.total;
  pageInfo.value.totalPage = Math.ceil(data?.total / 20);
  emit("backTotal", data?.total);
};
// 去详情页面
const goDetail = (id: string) => {
  navigateTo({ path: `/prodetail/${id}` });
};

const changePage = (page: number) => {
  nowPage.value = page;
  if (nowPage.value > 5) {
    let list = [];
    list = [nowPage.value - 2, nowPage.value - 1, nowPage.value];
    if (nowPage.value + 1 <= pageInfo.value.totalPage) {
      list.push(nowPage.value + 1);
    }
    if (nowPage.value + 2 <= pageInfo.value.totalPage) {
      list.push(nowPage.value + 2);
    }
    centerPage.value = list;
  }
};
// 分页
const pageGo = (type: number) => {
  if (type == 1 && nowPage.value != 1) {
    changePage(nowPage.value - 1);
  } else if (type == 2 && nowPage.value != pageInfo.value.totalPage) {
    changePage(nowPage.value + 1);
  }
};
type Tsearch = {
  [k: string]: string;
};
const hanldeChangeFilteredResult = (objs: {
  keys: Tsearch;
  widthList: number[];
  weightList: [];
  priceList: [];
  vpriceList: [];
}) => {
  filteredResult.value = objs.keys;
  widthList.value = objs.widthList;
  weightList.value = objs.weightList;
  priceList.value = objs.priceList;
  vpriceList.value = objs.vpriceList;
  nowPage.value = 1;
  init();
};
const hanldeChangeFilteredAttr = (keys: Tsearch) => {
  filteredResult.value = keys;
  nowPage.value = 1;
  init();
};
watch(
  () => route.query.q,
  (newVal: any) => {
    searchCont.value = newVal;
    init();
  },
  {
    immediate: true,
    deep: true,
  }
);
defineExpose({
  hanldeChangeFilteredResult,
  hanldeChangeFilteredAttr,
});
</script>

<style lang="stylus" scoped>
.noMess{
  font-weight: 300;
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-top 35px
}
.box{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .pro-box{
    width: 245px;
    height:410px
    border: 1px solid #fff;
    margin-right 15px;
    margin-bottom 20px
    padding 6px
    box-sizing border-box
    transition all .3s
    cursor pointer
    .pro-img-box{
      width 230px;
      height 240px;
      display flex
      justify-content center
      align-items center
    }
    .pro-img{
      width 100%
    }
    .text-box{
      .name{
        height 38px
        font-weight: bold;
        font-size: 14px;
        margin-top 11px
        margin-bottom 15px
      }
      .weight{
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        margin-bottom 11px
      }
      .mb10{
        margin-bottom 10px
      }
    }
  }
  .pro-box:hover{
    border: 1px solid #e1e1e1;
  }
}
.page-box{
  display flex
  justify-content flex-start
  align-items center
  .before-btn{
    width: 28px;
    height: 31px;
    border-radius: 4px 0px 0px 4px;
    border: 1px solid #333333;
    cursor pointer
    text-align center
    line-height 31px
  }
  .number-box{
    width: 28px;
    height: 31px;
    border: 1px solid #333333;
    cursor pointer
    transition all .3s
    text-align center
    line-height 31px
  }
  .number-box:hover{
    background: #E1E1E1;
  }
  .right-btn{
    width: 28px;
    height: 31px;
    border-radius: 0px 4px 4px 0px;
    border: 1px solid #333333;
    cursor pointer
    text-align center
    line-height 31px
  }
  .page-chose{
    background: #292727;
    color:#fff
  }
}
</style>
